<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧租房可视化平台</title>
    <link rel="stylesheet" href="../static/css/index.css">
</head>
<body>
<div id="app">
    <!-- 顶部导航栏 -->
    <div class="top-bar">
        <div class="title-container">
            <h1 class="main-title">智慧租房可视化平台</h1>
            <div class="indicators">
                <div class="indicator">
                    <span class="indicator-label">历史总量</span>
                    <span class="indicator-value">20k</span>
                </div>
                <div class="indicator">
                    <span class="indicator-label">在租总量</span>
                    <span class="indicator-value">0.4K</span>
                </div>
                <div class="indicator">
                    <span class="indicator-label">平均租金</span>
                    <span class="indicator-value">¥1.499K</span>
                </div>
                <div class="indicator">
                    <span class="indicator-label">平均面积</span>
                    <span class="indicator-value">62.5㎡</span>
                </div>
            </div>
        </div>

        <div class="switch-buttons">
            <button class="switch-btn" :class="{active: currentDashboard === 1}" @click="switchDashboard(1)">可视化窗口一</button>
            <button class="switch-btn" :class="{active: currentDashboard === 2}" @click="switchDashboard(2)">可视化窗口二</button>
        </div>
    </div>

    <!-- 总览模式 -->
    <div class="dashboard" v-if="currentDashboard === 1">
        <div class="main-content">
            <div class="side-panel">
                <div class="chart-container">
                    <div id="div-map-1" style="height: 100%; width: 100%;"></div>
                </div>
                <div class="chart-container">
                    <div id="div-map-2" style="height: 100%; width: 100%;"></div>
                </div>
            </div>
            <div class="chart-container center-panel">
                <div id="div-map-3" style="height: 100%; width: 100%;">

                </div>
            </div>
            <div class="side-panel">
                <div class="chart-container">
                    <div id="div-map-4" style="height: 100%; width: 100%;"></div>
                </div>
                <div class="chart-container">
                    <div id="div-map-5" style="height: 100%; width: 100%;"></div>
                </div>
            </div>
        </div>
        <div class="bottom-charts">
            <div class="chart-container bottom-chart">
                <div id="div-map-6" style="height: 100%; width: 100%;"></div>
            </div>
            <div class="chart-container bottom-chart">
                <div id="div-map-7" style="height: 100%; width: 100%;"></div>
            </div>
            <div class="chart-container bottom-chart">
                <div id="div-map-8" style="height: 100%; width: 100%;"></div>
            </div>
            <div class="chart-container bottom-chart">
                <div id="div-map-9" style="height: 100%; width: 100%;"></div>
            </div>
        </div>
    </div>

    <!-- 分析模式 -->
    <div class="dashboard" v-if="currentDashboard === 2">
        <div class="main-content">
            <div class="side-panel">
                <div class="chart-container">
                     <div id="div-map-11" style="height: 100%; width: 100%;"></div>
                </div>
                <div class="chart-container">
                    <div id="div-map-12" style="height: 100%; width: 100%;"></div>
                </div>
            </div>
            <div class="chart-container center-panel">
                <div id="div-map-13" style="height: 100%; width: 100%;"></div>
            </div>
            <div class="side-panel">
                <div class="chart-container">
                    <div id="div-map-14" style="height: 100%; width: 100%;"></div>
                </div>
                <div class="chart-container">
                    <div id="div-map-15" style="height: 100%; width: 100%;"></div>
                </div>
            </div>
        </div>
        <div class="bottom-charts">
            <div class="chart-container bottom-chart">
                <div id="div-map-16" style="height: 100%; width: 100%;"></div>
            </div>
            <div class="chart-container bottom-chart">
                <div id="div-map-17" style="height: 100%; width: 100%;"></div>
            </div>
            <div class="chart-container bottom-chart">
                <div id="div-map-18" style="height: 100%; width: 100%;"></div>
            </div>
            <div class="chart-container bottom-chart">
                <div id="div-map-19" style="height: 100%; width: 100%;"></div>
            </div>
        </div>
    </div>

</div>

<script src="../static/js/vue.js"></script>
<script src="../static/js/jquery.liMarquee.js"></script>
<script src="../static/js/jquery.js"></script>
<script src="../static/js/echarts.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            currentDashboard: 1,  // 默认为总览模式
            showModal: false,
        },
        mounted(){
            this.getData1();
            this.getData2();
            this.getData3();
            this.getData4();
            this.getData5();
            this.getData6();
            this.getData7();
            this.getData8();
            this.getData9();
            {#this.getData11();#}
            {#this.getData12();#}
            {#this.getData14();#}
            {#this.getData15();#}
            {#this.getData16();#}
            {#this.getData17();#}
            {#this.getData18();#}
            {#this.getData19();#}
            {#this.getData20();#}
        },
        methods: {
            // 切换仪表盘
            switchDashboard(num) {
                this.currentDashboard = num;
                this.showModal = false;  // 切换模式时关闭放大图表
                // 再次请求
                if (num === 1) {
                    this.getData1();
                    this.getData2();
                    this.getData3();
                    this.getData4();
                    this.getData5();
                    this.getData6();
                    this.getData7();
                    this.getData8();
                    this.getData9();
                }
                if(num === 2) {
                    this.getData11();
                    this.getData12();
                    this.getData14();
                    this.getData15();
                    this.getData16();
                    this.getData17();
                    this.getData18();
                    this.getData19();
                    this.getData20();
                }
            },
            getData1(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data1";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                list_data = []
                for (let i = 0; i < parse.result.length; i++) {
                    list_data.push(
                            {
                            name:  parse.result[i].region,
                            value:  parse.result[i].count / 1000
                        }
                    )
                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-1'));
                let list = list_data
                option = {
                    backgroundColor: '#dbf1fd',
                     title: {
                        text: '铜仁市各区可租房分布',
                         left: "center",
                    },
                    grid: {
                	    left: '20%',
                // 		top: '25%',
                // 		bottom: '30%',
                // 		right: '10%',
                    },
                    tooltip: {
                        trigger: 'axis',
                      },
                      xAxis: {
                        nameTextStyle: {
                          color: '#333333',
                          padding: [0, 0, 0, 20],
                        },
                        show: true,
                        axisLine: {
                          show: true,
                          lineStyle: {
                            color: '#7bb4dc',
                            shadowColor: 'rgba(91,100,134,1)',
                          },
                          symbol: ['none', 'arrow'],
                          symbolOffset: [0, 15],
                        },
                        splitLine: {
                          show: false,
                          lineStyle: {
                            color: 'rgba(255,255,255,0.2)',
                          },
                        },
                        axisLabel: {
                          show: true,
                          // rotate: -1,
                          fontSize: 14,
                          color: '#000',
                        },
                        axisTick: {
                          show: false,
                        },
                        data: list.map(item=>item.name),
                      },
                      yAxis: [
                        {
                          nameTextStyle: {
                            color: '#333333',
                            padding: [0, 0, 0, 20],
                          },
                          show: true,
                          axisTick: {
                            show: false,
                          },
                          axisLine: {
                            show: true,
                            symbol: ['none', 'arrow'],
                            symbolOffset: [0, 15],
                            lineStyle: {
                              // color: 'rgba(255, 129, 109, 0.1)',
                              width: 1, //这里是为了突出显示加上的
                              color: '#7bb4dc',
                              shadowColor: 'rgba(91,100,134,1)',
                            },
                          },
                          axisLabel: {
                            show: true,
                            fontSize: 12,
                            color: '#000',
                            formatter: '{value} k',
                          },
                          splitArea: {
                            areaStyle: {
                              color: ['rgba(255,255,255,.5)'],
                            },
                          },
                          splitLine: {
                            show: false,
                            lineStyle: {
                              color: '#cfe9f9',
                              width: 1,
                              type: 'solid',
                            },
                          },
                        },
                      ],
                      series: [
                        {
                          type: 'pictorialBar',
                          barCategoryGap: '-20%',
                          /*多个并排柱子设置柱子之间的间距*/
                          symbol: 'path://M0,10 L10,10 C5.5,10 6.5,5 5,5 C3.5,5 4.5,10 0,10 z',
                          label: {
                            show: true,
                            position: 'top',
                            distance: 10,
                            color: '#000',
                            fontWeight: 'bolder',
                            fontSize: 12,
                            formatter: ({ value }) => `${Number(value).toFixed(2)} 间`,
                          },
                          itemStyle: {
                            color: (params) => {
                              const colorList = [
                                // 运行
                                {
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [
                                    {
                                      offset: 0,
                                      color: '#75d874',
                                    },
                                    {
                                      offset: 1,
                                      color: '#75d87465',
                                    },
                                  ],
                                },
                                // 空闲
                                {
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [
                                    {
                                      offset: 0,
                                      color: '#2270b4',
                                    },
                                    {
                                      offset: 1,
                                      color: '#2270b465',
                                    },
                                  ],
                                },
                                // 停机
                                {
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [
                                    {
                                      offset: 0,
                                      color: '#a0adb8',
                                    },
                                    {
                                      offset: 1,
                                      color: '#a0adb865',
                                    },
                                  ],
                                },
                                // 待机
                                {
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [
                                    {
                                      offset: 0,
                                      color: '#bdad49',
                                    },
                                    {
                                      offset: 1,
                                      color: '#bdad4965',
                                    },
                                  ],
                                },
                                // 空运行
                                {
                                  type: 'linear',
                                  x: 0,
                                  y: 0,
                                  x2: 0,
                                  y2: 1,
                                  colorStops: [
                                    {
                                      offset: 0,
                                      color: '#ccc160',
                                    },
                                    {
                                      offset: 1,
                                      color: '#ccc16065',
                                    },
                                  ],
                                },
                              ];
                              return colorList[params.dataIndex];
                            },
                          },
                          data: list.map((v) => {
                            return v.value;
                          }),
                        },
                      ],
                };

                myChart.setOption(option);
            }
             },
            getData2(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data2";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_list = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_list.push(
                        {   value: parse.result[i].count,
                            name: parse.result[i].price
                        }
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-2'));

                option = {
                          title: {
                            text: '价格区间',
                            left: 'center'
                          },
                            grid: {
                               // left: '20%',
                            	//top: '25%',
                        // 		bottom: '30%',
                        // 		right: '10%',
                            },
                          tooltip: {
                            trigger: 'item'
                          },
                          legend: {
                            orient: 'vertical',
                            left: 'left'
                          },
                          series: [
                            {
                              name: '租房价格',
                              type: 'pie',
                              radius: '50%',
                               itemStyle: {
                                borderRadius: '50%',
                                borderColor: '#fff',
                                borderWidth: 2
                              },
                              data: data_list,
                              emphasis: {
                                itemStyle: {
                                  shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                              }
                            }
                          ]
                        };

                myChart.setOption(option);
            }
             },
            getData3(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data0";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);

                let myChartMap = echarts.init(document.getElementById('div-map-3'));
                myChartMap.showLoading();
                $.get('static/json/tr.json', function (geoJson) {
                    myChartMap.hideLoading();
                    echarts.registerMap('HK', geoJson);
                    myChartMap.setOption(
                        (option = {
                           layoutCenter: ['50%', '50%'],//位置
                            layoutSize: '100%',//大小
                            title: {
                                text: '铜仁租房',
                                subtext: 'Tongren Rent',
                                left: "center",
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b}<br/>{c} (间)'
                            },
                            toolbox: {},
                            visualMap: {
                                show: false,
                                min: 800,
                                max: 50000,
                                text: ['High', 'Low'],
                                realtime: false,
                                calculable: true,
                                inRange: {
                                    color: ['lightskyblue', 'yellow', 'orangered']
                                }
                            },
                            series: [
                                {
                                    name: '香港18区人口密度',
                                    type: 'map',
                                    map: 'HK',
                                    label: {
                                        show: true
                                    },
                                    data: [
                                        {name: '万山区', value: 2918},
                                        {name: '碧江区', value: 23296},
                                        {name: '松桃苗族自治县', value: 1475}
                                    ],
                                }
                            ]
                        })
                    );
                });
                }
             },
            getData4(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data3";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                let data_2 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                        parse.result[i].way
                    )
                    data_2.push(
                        parse.result[i].count
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-4'));

                option = {
                    title: {
                        text: '租房方式分布',
                        left: "center",
                    },
                       tooltip: {
                          trigger: 'axis',
                          axisPointer: {
                             type: 'shadow'
                          },
                          valueFormatter: (value) => value + '%' //改变显示文字
                       },
                       grid: {
                          left: '10%',
                          right: '4%',
                          bottom: '3%',
                          containLabel: true
                       },
                       xAxis: {
                          name: '租房方式率',
                          nameLocation: 'start',
                          type: 'value',
                          splitLine: { show: false },
                          nameTextStyle: {
                             color: 'black'
                          },
                          axisLine: {
                             show: true
                          },
                          axisTick: {
                             show: true //刻度线
                          },
                          splitNumber: 10,
                          max: 100
                       },
                       yAxis: {
                           name: "租房方式",
                          type: 'category',
                          data: data_1,
                          axisLabel: {
                             color: 'black'
                          },
                          axisLine: {
                             show: true //隐藏y轴
                          },
                          axisTick: {
                             show: true //刻度线
                          }
                       },
                       series: [
                          {
                             type: 'bar',
                             data: [60, 50, 90, 55, 25],
                             itemStyle: {
                                normal: {
                                   barBorderRadius: 31,// 让柱形上下变成圆角
                                   color: function (params) {
                                      var colorList = ["#54bcbd",  "#ff5b5b"];
                                      return colorList[params.dataIndex]
                                   },
                                   label: {
                                      formatter: "{c}" + "%", //显示柱子上的文字
                                      show: true,
                                      position: [20, 27],
                                      textStyle: {
                                         fontWeight: "bolder",
                                         fontSize: "16",
                                         color: "#fff"
                                      }
                                   }
                                }
                             }
                          },
                          // 顶部的椭圆形(象形柱图):pictorialBar
                          {
                             type: "pictorialBar",
                             symbolSize: [40, 64],
                             symbolOffset: [1, 0],
                             z: 12,
                             symbolPosition: "end",
                             color: "#bbbbbb",
                             data: data_2
                          }
                       ]
                    };


                myChart.setOption(option);
            }
             },
            getData5(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data4";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                        { value: parse.result[i].count,
                            name: parse.result[i].orie
                        }
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-5'));

                option = {
                      title: {
                        text: "房屋朝向占比",
                        left: "center",
                      },
                    grid: {
                          left: '10%',
                          right: '4%',
                          bottom: '3%',
                          containLabel: true
                       },
                      color: [
                        "#c8f0cb",
                        "#9ee3e9",
                        "#aff6dc",
                        "#b1a2e7",
                        "#dfbcfa",
                        "#ecd9f0",
                        "#87a3f1",
                        "#9ecbff",
                      ],
                      tooltip: {
                        trigger: "item",
                        formatter: "{a} <br/>{b} : {c} ({d}%)",
                      },
                      toolbox: {
                        show: true,
                        feature: {
                          mark: { show: true },
                          dataView: { show: true, readOnly: false },
                          magicType: {
                            show: true,
                            type: ["pie", "funnel"],
                          },
                          restore: { show: true },
                          saveAsImage: { show: true },
                        },
                      },
                      calculable: true,
                      series: [
                        {
                          name: "房屋朝向占比",
                          type: "pie",
                          radius: [40, 120],

                          roseType: "area",
                          data: data_1,
                        },
                      ],
                    };



                myChart.setOption(option);
            }
             },
            getData6(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data6";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                let data_2 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                        parse.result[i].price
                    );
                    data_2.push(
                        parse.result[i].m
                    );
                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-6'));

                	option = {
                        {#backgroundColor:'#fff',#}
                        title:{
                            text:"价格平均房屋面积趋势图",
                            left: 'center',
                            textStyle:{
                                color:"#35598d",
                                fontSize:16,
                                fontWeight:'normal'
                            }
                        },
                        tooltip:{
                            trigger: 'axis',
                        },
                        grid: {
                            left: '1%',
                            right: '4%',
                            bottom: '20%',
                            top: '8%',
                            containLabel: true
                        },
                        legend: {
                            show: false
                        },
                        xAxis :{
                            name: '价格',
                            type : 'category',
                            data:data_1,
                            axisLabel:{          //坐标轴字体颜色
                                textStyle:{
                                    color: '#9eaaba'
                                }
                            },
                            axisLine:{
                                lineStyle:{
                                    color:"#e5e5e5"
                                }
                            },
                            axisTick:{       //y轴刻度线
                              show:false
                            },
                            splitLine:{    //网格
                                show: false,
                            },
                            boundaryGap: true,
                        },
                        yAxis :{
                            name: '平方米',
                            type : 'value',
                            axisLabel:{        //坐标轴字体颜色
                                textStyle:{
                                    color: '#9eaaba'
                                }
                            },
                            axisLine:{
                                show:false,
                            },
                            axisTick:{       //y轴刻度线
                              show:false
                            },
                            splitLine:{    //网格
                                show: true,
                                lineStyle:{
                                    color:'#dadde4',
                                    type:"dashed"
                                }
                            }
                        },

                        series:[{
                            name:'平方米',
                            type: 'line',
                            smooth:true,
                            symbol: 'circle',
                            symbolSize: 8,
                            itemStyle: {
                                color: "rgb(55, 200, 143)",
                                borderColor: "#fff",
                                borderWidth: 1,
                            },
                            label: {
                                show: true,
                                distance: 10,
                                color: '#000',
                                fontWeight: 'bolder',
                                fontSize: 16,
                            },
                            lineStyle: {
                                normal: {
                                    color:"rgb(55, 200, 143)",
                                    shadowColor: 'rgba(55, 200, 143, .4)',
                                    shadowBlur: 8,
                                    shadowOffsetY: 10,
                                    shadowOffsetX: 0,
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(55, 200, 143, .4)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(55, 200, 143, 0)'
                                    }]),
                                }
                            },
                            data: data_2,
                        }]
                    };


                myChart.setOption(option);
            }
             },
            getData7(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data5";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                let data_2 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                        parse.result[i].maintain
                    );
                    data_2.push(
                        parse.result[i].count
                    );
                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-7'));

                	option = {
                        {#backgroundColor:'#fff',#}
                        title:{
                            text:"维护时间间隔趋势图",
                            left: 'center',
                            textStyle:{
                                color:"#35598d",
                                fontSize:16,
                                fontWeight:'normal'
                            }
                        },
                        tooltip:{
                            trigger: 'axis',
                        },
                        grid: {
                            left: '1%',
                            right: '4%',
                            bottom: '20%',
                            top: '8%',
                            containLabel: true
                        },
                        legend: {
                            show: false
                        },
                        xAxis :{
                            name: '天',
                            type : 'category',
                            data:data_1,
                            axisLabel:{          //坐标轴字体颜色
                                textStyle:{
                                    color: '#9eaaba'
                                }
                            },
                            axisLine:{
                                lineStyle:{
                                    color:"#e5e5e5"
                                }
                            },
                            axisTick:{       //y轴刻度线
                              show:false
                            },
                            splitLine:{    //网格
                                show: false,
                            },
                            boundaryGap: true,
                        },
                        yAxis :{
                            name: '次数',
                            type : 'value',
                            axisLabel:{        //坐标轴字体颜色
                                textStyle:{
                                    color: '#9eaaba'
                                }
                            },
                            axisLine:{
                                show:false,
                            },
                            axisTick:{       //y轴刻度线
                              show:false
                            },
                            splitLine:{    //网格
                                show: true,
                                lineStyle:{
                                    color:'#dadde4',
                                    type:"dashed"
                                }
                            }
                        },

                        series:[{
                            name:'次数',
                            type: 'line',
                            smooth:true,
                            symbol: 'circle',
                            symbolSize: 8,
                            itemStyle: {
                                color: "rgb(55, 200, 143)",
                                borderColor: "#fff",
                                borderWidth: 1,
                            },
                            label: {
                                show: true,
                                distance: 10,
                                color: '#000',
                                fontWeight: 'bolder',
                                fontSize: 8,
                            },
                            lineStyle: {
                                normal: {
                                    color:"rgb(55, 200, 143)",
                                    shadowColor: 'rgba(55, 200, 143, .4)',
                                    shadowBlur: 8,
                                    shadowOffsetY: 10,
                                    shadowOffsetX: 0,
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(55, 200, 143, .4)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(55, 200, 143, 0)'
                                    }]),
                                }
                            },
                            data: data_2,
                        }]
                    };


                myChart.setOption(option);
            }
             },
            getData8(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data7";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                let data_2 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                        parse.result[i].price
                    )
                    data_2.push(
                        parse.result[i].count
                    )
                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-8'));

                option = {
                        {#backgroundColor:'#fff',#}
                        title:{
                            text:"价格趋势图",
                            left: 'center',
                            textStyle:{
                                color:"#35598d",
                                fontSize:16,
                                fontWeight:'normal'
                            }
                        },
                        tooltip:{
                            trigger: 'axis',
                        },
                        grid: {
                            left: '1%',
                            right: '4%',
                            bottom: '20%',
                            top: '8%',
                            containLabel: true
                        },
                        legend: {
                            show: false
                        },
                        xAxis :{
                            name: '天',
                            type : 'category',
                            data:data_1,
                            axisLabel:{          //坐标轴字体颜色
                                textStyle:{
                                    color: '#9eaaba'
                                }
                            },
                            axisLine:{
                                lineStyle:{
                                    color:"#e5e5e5"
                                }
                            },
                            axisTick:{       //y轴刻度线
                              show:false
                            },
                            splitLine:{    //网格
                                show: false,
                            },
                            boundaryGap: true,
                        },
                        yAxis :{
                            name: '次数',
                            type : 'value',
                            axisLabel:{        //坐标轴字体颜色
                                textStyle:{
                                    color: '#9eaaba'
                                }
                            },
                            axisLine:{
                                show:false,
                            },
                            axisTick:{       //y轴刻度线
                              show:false
                            },
                            splitLine:{    //网格
                                show: true,
                                lineStyle:{
                                    color:'#dadde4',
                                    type:"dashed"
                                }
                            }
                        },

                        series:[{
                            name:'次数',
                            type: 'line',
                            smooth:true,
                            symbol: 'circle',
                            symbolSize: 8,
                            itemStyle: {
                                color: "rgb(55, 200, 143)",
                                borderColor: "#fff",
                                borderWidth: 1,
                            },
                            label: {
                                show: true,
                                distance: 10,
                                color: '#000',
                                fontWeight: 'bolder',
                                fontSize: 8,
                            },
                            lineStyle: {
                                normal: {
                                    color:"rgb(55, 200, 143)",
                                    shadowColor: 'rgba(55, 200, 143, .4)',
                                    shadowBlur: 8,
                                    shadowOffsetY: 10,
                                    shadowOffsetX: 0,
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(55, 200, 143, .4)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(55, 200, 143, 0)'
                                    }]),
                                }
                            },
                            data: data_2,
                        }]
                    };



                myChart.setOption(option);
            }
             },
            getData9(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data8";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                let data_2 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                        parse.result[i].m
                    )
                    data_2.push(
                        parse.result[i].count
                    )
                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-9'));

                option = {
                        {#backgroundColor:'#fff',#}
                        title:{
                            text:"房屋面积趋势图",
                            left: 'center',
                            textStyle:{
                                color:"#35598d",
                                fontSize:16,
                                fontWeight:'normal'
                            }
                        },
                        tooltip:{
                            trigger: 'axis',
                        },
                        grid: {
                            left: '1%',
                            right: '4%',
                            bottom: '20%',
                            top: '8%',
                            containLabel: true
                        },
                        legend: {
                            show: false
                        },
                        xAxis :{
                            name: '天',
                            type : 'category',
                            data:data_1,
                            axisLabel:{          //坐标轴字体颜色
                                textStyle:{
                                    color: '#9eaaba'
                                }
                            },
                            axisLine:{
                                lineStyle:{
                                    color:"#e5e5e5"
                                }
                            },
                            axisTick:{       //y轴刻度线
                              show:false
                            },
                            splitLine:{    //网格
                                show: false,
                            },
                            boundaryGap: true,
                        },
                        yAxis :{
                            name: '次数',
                            type : 'value',
                            axisLabel:{        //坐标轴字体颜色
                                textStyle:{
                                    color: '#9eaaba'
                                }
                            },
                            axisLine:{
                                show:false,
                            },
                            axisTick:{       //y轴刻度线
                              show:false
                            },
                            splitLine:{    //网格
                                show: true,
                                lineStyle:{
                                    color:'#dadde4',
                                    type:"dashed"
                                }
                            }
                        },

                        series:[{
                            name:'次数',
                            type: 'line',
                            smooth:true,
                            symbol: 'circle',
                            symbolSize: 8,
                            itemStyle: {
                                color: "rgb(55, 200, 143)",
                                borderColor: "#fff",
                                borderWidth: 1,
                            },
                            label: {
                                show: true,
                                distance: 10,
                                color: '#000',
                                fontWeight: 'bolder',
                                fontSize: 8,
                            },
                            lineStyle: {
                                normal: {
                                    color:"rgb(55, 200, 143)",
                                    shadowColor: 'rgba(55, 200, 143, .4)',
                                    shadowBlur: 8,
                                    shadowOffsetY: 10,
                                    shadowOffsetX: 0,
                                },
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: 'rgba(55, 200, 143, .4)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(55, 200, 143, 0)'
                                    }]),
                                }
                            },
                            data: data_2,
                        }]
                    };



                myChart.setOption(option);
            }
             },
            getData11(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data9";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                       {
                        name: parse.result[i].type,
                        value:parse.result[i].count,
                        }
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-11'));

                 const data = data_1

                option = {
                     title: {
                        text: '房屋类型分布',
                         left: "center",
                    },
                   grid: {
                    top: '15%',
                    right: '5%',
                    left: '20%',
                    bottom: '8%',
                    containLabel: true,
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)',
                  },
                  series: [
                    {
                      name: '',
                      type: 'pie',
                      center: ['50%', '50%'],
                        //radius: '30%',
                      roseType: 'area',
                      itemStyle: {
                        borderRadius: 0,
                      },
                      color: [
                        '#b33ecc',
                        '#fb3878',
                        '#ffbf24',
                        '#f4954f',
                        '#472af8',
                        '#0270f0',
                        '#1b4087',
                        '#1b8286',
                        '#1b712a',
                        '#226e80',
                        '#288464',
                        '#fedf5d',
                        '#db373e',
                        '#dc5341',
                        '#dd6f44',
                        '#7c3dd7',
                      ],
                      data: data.sort((a, b) => b.value - a.value) || [],
                      label: {
                        alignTo: 'none',
                        formatter: '{num|{c}}  {per|{d}%}\n{name|{b}}',
                        minMargin: 5,
                        edgeDistance: 10,
                        lineHeight: 15,
                        rich: {
                          num: {
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 25,
                            color: 'inherit',
                          },
                          per: {
                            fontSize: 12,
                            fontWeight: 'bold',
                            lineHeight: 25,
                            color: 'inherit',
                          },
                          name: {
                            fontSize: 12,
                            fontWeight: 'bold',
                            lineHeight: 25,
                            color: 'inherit',
                          },
                        },
                      },
                      labelLayout: function (params) {
                        const isLeft = params?.labelRect?.x < 200 / 2
                        const points = params?.labelLinePoints
                        points[2][0] = isLeft ? params?.labelRect?.x : params?.labelRect?.x + params?.labelRect?.width
                        return {
                          labelLinePoints: points,
                        }
                      },
                    },
                  ],
                };

                myChart.setOption(option);
            }
             },
            getData12(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data10";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                       {
					    name:  parse.result[i].staying,
					    num:  parse.result[i].count
				     }
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-12'));

                var m_data_new = [];
			    var m_data_old = [];
			    var m_data = data_1;

                m_data.sort(function(a, b) {
                    return a.num - b.num
                })

                m_data_new.push([m_data[0].name, m_data[0].num]);
                m_data_old.push([m_data[0].name, 0]);

                for (var i = 1; i < m_data.length; i++) {
                    m_data_new.push([
                        m_data[i].name,
                        m_data[i].num - m_data[i - 1].num
                    ]);
                    m_data_old.push([
                        m_data[i].name,
                        m_data[i].num + m_data[i - 1].num
                    ]);
                };

                var option = {
                    title: {
                        text: '入住时间',
                        left: "center",
                    },
                   grid: {
                    top: '15%',
                    right: '5%',
                    left: '20%',
                    bottom: '8%',
                    containLabel: true,
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: '{c}(次)',
                  },
                    xAxis: {
                        naem: "入住分类",
                        type: 'category',
                        axisLine: {
                            //坐标轴轴线相关设置
                            lineStyle: {
                                color: '#262571'
                            }
                        },
                        axisTick: {//刻度相关设置
		                    show: true//让刻度隐藏
	                    },
                    },
                    yAxis: {
                        naem: "统计次数",
                        type: 'value',
                        axisLine: {
                            //坐标轴轴线相关设置
                            lineStyle: {
                                color: '#262571'
                            }
                        },
                        axisTick: {//刻度相关设置
		                    show: true ,//让刻度隐藏
	                    },
                    },
                    series: [{
                        type: 'bar',
                        barWidth: '100%',
                        stack: 'a',
                        barCategoryGap: '1%',
                        itemStyle: {
                            color: '#DBF1FD'
                        },
                        data: m_data_old
                    }, {
                        type: 'bar',
                        barWidth: '100%',
                        stack: 'a',
                        data: m_data_new
                    }]
                }
                myChart.setOption(option);
            }
             },
            getData14(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data11";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                       {
                           name: parse.result[i].floor,
                           value:parse.result[i].count
                        }
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-13'));
                const data = data_1
                option = {
                     title: {
                        text: '房屋楼层位置分布Top20',
                         left: "center",
                    },
                   grid: {
                    top: '15%',
                    right: '5%',
                    left: '20%',
                    bottom: '8%',
                    containLabel: true,
                  },
                  tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)',
                  },
                  series: [
                    {
                      name: '',
                      type: 'pie',
                      center: ['50%', '50%'],
                        //radius: '30%',
                      roseType: 'area',
                      itemStyle: {
                        borderRadius: 0,
                      },
                      color: [
                        '#b33ecc',
                        '#fb3878',
                        '#ffbf24',
                        '#f4954f',
                        '#472af8',
                        '#0270f0',
                        '#1b4087',
                        '#1b8286',
                        '#1b712a',
                        '#226e80',
                        '#288464',
                        '#fedf5d',
                        '#db373e',
                        '#dc5341',
                        '#dd6f44',
                        '#7c3dd7',
                      ],
                      data: data.sort((a, b) => b.value - a.value) || [],
                      label: {
                        alignTo: 'none',
                        formatter: '{num|{c}}  {per|{d}%}\n{name|{b}}',
                        minMargin: 5,
                        edgeDistance: 10,
                        lineHeight: 15,
                        rich: {
                          num: {
                            fontSize: 14,
                            fontWeight: 'bold',
                            lineHeight: 25,
                            color: 'inherit',
                          },
                          per: {
                            fontSize: 12,
                            fontWeight: 'bold',
                            lineHeight: 25,
                            color: 'inherit',
                          },
                          name: {
                            fontSize: 12,
                            fontWeight: 'bold',
                            lineHeight: 25,
                            color: 'inherit',
                          },
                        },
                      },
                      labelLayout: function (params) {
                        const isLeft = params?.labelRect?.x < 200 / 2
                        const points = params?.labelLinePoints
                        points[2][0] = isLeft ? params?.labelRect?.x : params?.labelRect?.x + params?.labelRect?.width
                        return {
                          labelLinePoints: points,
                        }
                      },
                    },
                  ],
                };


                myChart.setOption(option);
            }
             },
            getData15(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data12";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                let data_2 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                       parse.result[i].tenancy_term
                    )
                    data_2.push(
                       parse.result[i].count
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-14'));
                 const data = data_2;
                 const dataX = data_1;
                option = {
                   //你的代码
                    title: {
                        text: "租期分布",
                        left: "center"
                      },
                      tooltip: {
                        trigger: "axis",
                        axisPointer: {
                          type: "cross",
                        },
                        formatter: function (params) {
                          return (
                            params[0].name +
                            "<br/>" +
                            params[0].seriesName +
                            " : " +
                            params[0].value +
                            "次"
                          );
                        },
                      },
                      legend: {
                        data: ["租期"],
                      },
                      xAxis: {
                        data: dataX,
                      },
                      yAxis: {},
                      series: [
                        {
                          name: "次数",
                          type: "bar",
                          data: data,
                        },
                      ],
                };

                    myChart.setOption(option);
                }
             },
            getData16(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data13";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_1 = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_1.push(
                        {
                             name: parse.result[i].stall,
                            value: parse.result[i].count
                        }
                    )
                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-15'));
                 let data = data_1;
                    let list = data.map(v=>{return v.value})
                    let max = Math.max.apply(null, list);//最大值
                    let sum = list.reduce(function (prev, curr) {
                      return prev + curr;
                    }, 0);//总和
                    let percent = (max/sum)*100;
                    console.log(percent)
                    option = {
                        title: {
                        text: '车位类型分布',
                         left: "center",
                    },
                      // backgroundColor: "#013954",

                      tooltip: {
                        trigger: "item",
                        formatter: "{b}  <br/>次数: {c} 次  <br/>占比：({d}%)",
                      },
                      legend: {
                        // show: false,
                        orient: "vertical",
                        left: 5,
                        top: 5,
                        itemWidth: 6,
                        itemHeight: 6,
                        textStyle: {
                          color: "#5470C6",
                          fontSize: 11,
                        },
                      },
                      series: [
                        {
                          name: "内圆",
                          type: "pie",
                          radius: percent+"%",
                          zlevel: 10,
                          center: ["50%", "48%"],
                          data: data,
                          roseType: "radius",
                          label: {
                            show: false,
                            color: "#fff",
                          },
                          labelLine: {
                            show: false,
                            lineStyle: {
                              color: "#888",
                            },
                          },
                          itemStyle: {
                            color: function (params) {
                              var colorList = [
                                "#ccc016",
                                "#1089E7",
                                "#7bd42b",
                                "#8B78F6",
                                "#ffff99",
                                "#00ffcc",
                                "#00ff99",
                                "#33ccff",
                                "#388df6",
                              ];
                              return colorList[params.dataIndex % colorList.length];
                            },
                          },
                          animationType: "scale",
                          animationEasing: "elasticOut",
                          animationDelay: function (idx) {
                            return Math.random() * 200;
                          },
                        },
                        {
                          name: '外圆',
                          type: 'pie',
                          radius: "50%",
                          color: '#cdcdcd',
                          center: ["50%", "48%"],
                          data: data,
                          label: {
                            formatter: "{d}%",
                          },
                          emphasis: {
                            itemStyle: {
                              shadowBlur: 10,
                              shadowOffsetX: 0,
                              shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                          }
                        }
                      ],
                    }
                    myChart.setOption(option);
                }
             },
            getData17(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data14";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_list = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_list.push(
                        {   value: parse.result[i].count,
                            name: parse.result[i].water
                        }
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-16'));

                option = {
                          title: {
                            text: '用水分布',
                            left: 'center'
                          },
                            grid: {
                               // left: '20%',
                            	//top: '25%',
                        // 		bottom: '30%',
                        // 		right: '10%',
                            },
                          tooltip: {
                            trigger: 'item'
                          },
                          legend: {
                            orient: 'vertical',
                            left: 'left'
                          },
                          series: [
                            {
                              ///name: '租房价格',
                              type: 'pie',
                              radius: '45%',
                               itemStyle: {
                                borderRadius: '50%',
                                borderColor: '#fff',
                                borderWidth: 2
                              },
                              data: data_list,
                              emphasis: {
                                itemStyle: {
                                  shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                              }
                            }
                          ]
                        };

                myChart.setOption(option);
            }
             },
            getData18(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data15";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_list = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_list.push(
                        {   value: parse.result[i].count,
                            name: parse.result[i].electro
                        }
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-17'));

                option = {
                          title: {
                            text: '用电分布',
                            left: 'center'
                          },
                            grid: {
                               // left: '20%',
                            	//top: '25%',
                        // 		bottom: '30%',
                        // 		right: '10%',
                            },
                          tooltip: {
                            trigger: 'item'
                          },
                          legend: {
                            orient: 'vertical',
                            left: 'left'
                          },
                          series: [
                            {
                              //name: '租房价格',
                              type: 'pie',
                              radius: '45%',
                               itemStyle: {
                                borderRadius: '50%',
                                borderColor: '#fff',
                                borderWidth: 2
                              },
                              data: data_list,
                              emphasis: {
                                itemStyle: {
                                  shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                              }
                            }
                          ]
                        };

                myChart.setOption(option);
            }
             },
            getData19(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data16";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_list = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_list.push(
                        {   value: parse.result[i].count,
                            name: parse.result[i].fuel
                        }
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-18'));

                option = {
                          title: {
                            text: '燃气分布',
                            left: 'center'
                          },
                            grid: {
                               // left: '20%',
                            	//top: '25%',
                        // 		bottom: '30%',
                        // 		right: '10%',
                            },
                          tooltip: {
                            trigger: 'item'
                          },
                          legend: {
                            orient: 'vertical',
                            left: 'left'
                          },
                          series: [
                            {
                              //name: '燃气',
                              type: 'pie',
                              radius: '45%',
                               itemStyle: {
                                borderRadius: '50%',
                                borderColor: '#fff',
                                borderWidth: 2
                              },
                              data: data_list,
                              emphasis: {
                                itemStyle: {
                                  shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                              }
                            }
                          ]
                        };

                myChart.setOption(option);
            }
             },
            getData20(){
                // ajax
                let xhttp;
                if (window.XMLHttpRequest) {
                    xhttp = new XMLHttpRequest();
                } else {
                }
                let url = "http://127.0.0.1:5000/data17";
                xhttp.open("GET", url, true);
                xhttp.send();
                // 响应
                xhttp.onreadystatechange = function () {
                let parse = JSON.parse(xhttp.responseText);
                let data_list = []
                for (let i = 0; i < parse.result.length; i++) {
                    data_list.push(
                        {   value: parse.result[i].count,
                            name: parse.result[i].heating
                        }
                    )

                }
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('div-map-19'));

                option = {
                          title: {
                            text: '价格区间',
                            left: 'center'
                          },
                            grid: {
                               // left: '20%',
                            	//top: '25%',
                        // 		bottom: '30%',
                        // 		right: '10%',
                            },
                          tooltip: {
                            trigger: 'item'
                          },
                          legend: {
                            orient: 'vertical',
                            left: 'left'
                          },
                          series: [
                            {
                              //name: '租房价格',
                              type: 'pie',
                              radius: '45%',
                               itemStyle: {
                                borderRadius: '50%',
                                borderColor: '#fff',
                                borderWidth: 2
                              },
                              data: data_list,
                              emphasis: {
                                itemStyle: {
                                  shadowBlur: 10,
                                  shadowOffsetX: 0,
                                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                              }
                            }
                          ]
                        };

                myChart.setOption(option);
            }
             },

        }
    });


</script>
</body>
</html>
